import React, { useEffect } from 'react';
import { connect } from 'dva';

//这个index应该是命名空间的名字
const IndexPage = ({ dispatch, index}) => {

    let {isInited, coffee, coffeeList} = index;
    //初始化页面参数
    // useEffect(()=>{
    //    console.log('useEffect--init');
    // }, []);
    if(!isInited){
        dispatch({ type: 'index/init', payload: 'mocha' });
    }

    
    //dispatch({ type: 'index/testCoffee', payload: 'mocha' });
    //如果这么写将一直触发reduce，页面会不停的初始化

    function testCoffee(params){
        console.log(params);
        //需要@connect()连接dva中的model
        dispatch({ type: 'index/testCoffee', payload: params });
    }

    console.log('render',index);

    return (
        <div>
            <h1 className="title">Show me the UI!</h1>
            {/* <button onClick={testCoffee.bind(this, 'espresso')}>espresso</button> */}
            <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
            {/* <span>{JSON.stringify(coffee)}</span> */}
            {/* <span>{testtest}</span> */}
            {
                coffeeList.map((item, i)=>{
                    return (
                        <div key={i}>{JSON.stringify(item)}</div>
                    )
                })
            }
        </div>
    );
  };

export default connect(({ index }) => ({
    index
}))(IndexPage);

//页面初始化的一种方式
// export default connect(({index, loading}) => ({
//     index,
//     qindex: loading.effects['index/testCoffee']
// }))(IndexPage);